<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :autoBack="true">
			<view slot="center" class="navigate-title">合同管理</view>
		</u-navbar>

		<view class="type-box">
			<view :class="isclick == 1? 'isclick' : 'click-none'" @click="classification(1)">已签约</view>
			<view :class="isclick == 0? 'isclick' : 'click-none'" @click="classification(0)">未签约</view>
			<view :class="isclick == 2? 'isclick' : 'click-none'" @click="classification(2)">已过期</view>
		</view>

		<!-- 关键1：scroll 明确设置盒模型 + 左右内边距 + 溢出隐藏 -->
		<scroll-view scroll-y class="scroll" style="box-sizing: border-box; overflow: hidden;">
			<view v-for="(item,index) in filterContractList" :key="index">
				<!-- 关键2：卡片设置盒模型 + 100% 宽度（不超 scroll 内边距） -->
				<view class="card">
					<view class="top-box">
						<view class="title">{{ item.companyName || companyInfo.companyName }}</view>
					</view>
					<view style="height: 2rpx;background: rgba(237, 237, 237, 1);"></view>
					<view class="info-box">
						<text class="ash margin-right">申报类型: </text>
						<text class="black">{{ item.declareType == 0? '正常申报' : '零申报' }}</text>
						<view class="bottom-box">
							<view class="item">
								<text class="ash margin-right">授权代理人: </text>
								<text class="black">{{ item.accreditName || '暂无' }}</text>
							</view>
							<view class="line"></view>
							<view class="item">
								<text class="ash margin-right">签订日期: </text>
								<text :class="item.status == 0? 'sign-none' : 'black'">
									{{ item.status == 0? '未签约' : item.beginTime || '暂无' }}
								</text>
							</view>
						</view>
						<view class="bottom-box">
							<view class="item">
								<text class="ash margin-right">开始日期: </text>
								<text class="black">{{ item.beginTime || '暂无' }}</text>
							</view>
							<view class="line"></view>
							<view class="item">
								<text class="ash margin-right">结束日期: </text>
								<text class="black">{{ item.endTime || '暂无' }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 关键3：按钮栏宽度 100% + 内部按钮边距调整（避免超出） -->
				<view class="btn-box">
					<view></view>
					<view style="display: flex;">
						<view :class="item.status != 2 ? 'btn-two' : 'btn-one'" v-if="item.status != 0"
							@click="previewFile(item.contractUrl)">
							<image src="../../static/images/preview.png" v-if="item.status == 2"></image>
							<image style="width: 22rpx;height: 22rpx;margin-right: 16rpx;"
								src="../../static/images/preview-white.png" v-if="item.status != 2">
							</image>
							<view style="line-height: 56rpx;">查看</view>
						</view>
						<view class="btn-two" v-if="item.status != 1" @click="toFace(item)">
							<image style="width: 26rpx;height: 26rpx;margin-right: 14rpx;"
								src="../../static/images/qian.png"></image>
							<view style="line-height: 56rpx;">签署</view>
						</view>
					</view>
				</view>
			</view>

			<view class="no-data" v-if="filterContractList.length == 0">
				<u-empty text="暂无数据" mode="list"></u-empty>
				<view style="font-size: 24rpx;color: #999;margin-top: 20rpx;">
					{{ isclick == 0? '暂无未签约合同' : isclick == 1? '暂无已签约合同' : '暂无已过期合同' }}
				</view>
			</view>

			<view style="height: 40rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	// 脚本部分不变，无需修改
	import {
		getContractCurrentApi
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				isclick: 1,
				contractList: [],
				companyId: '',
				companyInfo: {},
			}
		},
		computed: {
			filterContractList() {
				return this.contractList.filter(item => item.status === this.isclick);
			}
		},
		onShow() {
			this.companyInfo = uni.getStorageSync('companyInfo') || {};
			this.companyId = this.companyInfo.id;
			this.classification(-1);
		},
		methods: {
			async classification(id) {
				if (id != -1) {
					this.isclick = id;
				}
				if (this.companyId) {
					try {
						const res = await getContractCurrentApi(this.companyId);
						if (res.code == 200) {
							const contractData = res.data ? [res.data] : [];
							this.contractList = contractData.map(item => {
								const newItem = {
									...item
								};
								newItem.companyName = this.companyInfo.companyName;
								const endTime = new Date(item.endTime);
								const now = new Date();
								if (now > endTime) {
									newItem.status = 2;
								}
								return newItem;
							});
						}
					} catch (error) {
						console.error("获取合同失败：", error);
						this.contractList = [];
						uni.showToast({
							title: '获取合同失败',
							icon: 'error'
						});
					}
				}
			},
			toFace(data) {
				data.companyName = this.companyInfo.companyName;
				uni.setStorageSync('faceInfo', data);
				uni.navigateTo({
					url: '/subpackageTwo/pages/confirmationInfo/confirmationInfo'
				})
			},
			previewFile(file) {
				if (!file) {
					uni.showToast({
						title: '暂无合同文件',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				uni.downloadFile({
					url: file,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								fileType: 'pdf',
								filePath: res.tempFilePath,
								showMenu: true,
								success: () => uni.hideLoading(),
								fail: (e) => {
									console.log(e);
									uni.hideLoading();
									uni.showToast({
										title: '打开失败',
										icon: "error"
									});
								}
							})
						}
					},
					fail: (e) => {
						uni.hideLoading();
						uni.showToast({
							title: '文件下载失败',
							icon: "error"
						});
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {

		/* 全局盒模型统一：避免 padding/border 增加元素总宽度 */
		* {
			box-sizing: border-box;
		}

		.type-box {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx; // 右侧也加边距，避免tab贴边

			.click-none {
				width: 140rpx;
				height: 52rpx;
				line-height: 52rpx;
				border-radius: 26rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx -2rpx 4rpx rgba(0, 0, 0, 0.05), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08);
				letter-spacing: 2rpx;
				font-size: 26rpx;
				text-align: center;
				margin-right: 20rpx;
				cursor: pointer;
			}

			.isclick {
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 26rpx;
				background: rgba(255, 255, 255, 1);
				border: 2rpx solid rgba(65, 136, 239, 1);
				box-shadow: 0rpx -2rpx 4rpx rgba(0, 0, 0, 0.05), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08);
				letter-spacing: 2rpx;
				font-size: 26rpx;
				text-align: center;
				color: rgba(65, 136, 239, 1);
				margin-right: 20rpx;
				cursor: pointer;
			}
		}

		.scroll {
			height: calc(100vh - 228rpx);
			padding: 0 30rpx; // 左右各30rpx边距（核心）
			overflow: hidden; // 强制隐藏溢出部分
		}

		.card {
			width: 100%; // 相对于scroll的内容宽度（已减去30rpx*2边距）
			height: 260rpx;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 18rpx;
			padding: 0; // 内部padding由子元素控制，避免总宽度超了
		}

		.top-box {
			width: 100%; // 卡片100%宽度，内部padding不超界
			height: 64rpx;
			padding: 16rpx 24rpx 0; // 左右各24rpx内边距，不超卡片宽度
		}

		.title {
			font-size: 26rpx;
			letter-spacing: 2rpx;
			line-height: 48rpx;
			font-weight: 600;
			white-space: nowrap; // 防止公司名过长换行
			overflow: hidden; // 超出部分隐藏
			text-overflow: ellipsis; // 显示省略号
		}

		.info-box {
			width: 100%; // 卡片100%宽度
			height: 156rpx;
			padding: 22rpx 24rpx 0; // 左右各24rpx内边距
			font-size: 22rpx;
			letter-spacing: 2rpx;
			overflow: hidden; // 防止内部文本溢出
		}

		.ash {
			color: rgba(166, 166, 166, 1);
		}

		.margin-right {
			margin-right: 12rpx;
		}

		.black {
			color: rgba(51, 51, 51, 1);
		}

		.sign-none {
			color: rgba(212, 48, 48, 1);
			font-weight: 700;
		}

		.bottom-box {
			width: 100%;
			display: flex;
			margin-top: 22rpx;
			align-items: center;
			justify-content: space-between;
		}

		.item {
			width: 46%; // 两个item加中间line不超100%
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis; // 文本过长显示省略号，不溢出
		}

		.line {
			width: 2rpx;
			height: 18rpx;
			background: rgba(229, 229, 229, 1);
		}

		.btn-box {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 24rpx;
			padding: 0 4rpx; // 轻微内边距，避免按钮贴边

			// 关键：按钮宽度自适应，减少固定宽度+边距导致的溢出
			.btn-one,
			.btn-two {
				flex: 0 0 auto; // 不拉伸，保持自身宽度
				min-width: 140rpx; // 最小宽度，避免过窄
				max-width: 164rpx; // 最大宽度，不超界
				height: 56rpx;
				border-radius: 34rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 16rpx; // 减少右边距，避免两个按钮超宽
			}

			.btn-one {
				background: rgba(237, 237, 237, 1);
				color: rgba(92, 92, 92, 1);

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 16rpx;
				}
			}

			.btn-two {
				background: linear-gradient(117.72deg, rgba(67, 207, 124, 1) 0%, rgba(13, 161, 106, 1) 100%);
				color: #fff;
			}

			// 最后一个按钮去掉右边距，避免溢出
			.btn-two:last-child {
				margin-right: 0;
			}
		}

		.no-data {
			width: 100%;
			height: calc(100% - 40rpx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
</style>